<template>
  <!--  -->
  <div class="content">
    <div class="pageSearchView">
      <el-form :inline="true" :model="searchParam" class="demo-form-inline">
        <el-form-item label="物料编码">
          <el-date-picker
              v-model="searchParam.shiftDate"
              type="date"
              placeholder="请选择班次日期"
              style="width: 100%"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="设备编码">
          <el-input v-model="searchParam.equipmentCode" placeholder="请输入设备编码" clearable style="width: 200px"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="getList()">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pageTableView">
      <div class="pageTableMenuView">
        <div class="pageTableTitle">列表信息</div>
      </div>
      <!-- 表格 -->
      <el-table class="pageTableClass" :data="paginatedData" border height="calc(100vh - 320px)">
        <el-table-column label="序号" align="center" width="70">
          <template #default="scope">
            <!-- 下标 + 1，计算公式：当前页数 * 每页大小 + 当前行的索引 + 1 --> {{
              (pageSearch.current - 1) * pageSearch.pageSize +
              scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column label="物料编码" prop="materialNo" min-width="150" align="center"
                         show-overflow-tooltip/>
        <el-table-column label="物料名称" prop="materialName" min-width="150" align="center"
                         show-overflow-tooltip/>
        <el-table-column type label="库存数量" prop="count" min-width="150" align="center"/>
        <el-table-column type label="库位名称" prop="storageName" min-width="150" align="center"/>
        <el-table-column type label="仓库名称" prop="warehouseName" min-width="150" align="center"/>

      </el-table>
      <div class="pagePagination">
        <el-pagination background v-model:current-page="pageSearch.current" v-model:page-size="pageSearch.pageSize"
                       :page-sizes="[10, 20, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next"
                       :total="pageTotal"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {computed, reactive, ref} from 'vue';
import type {FormInstance, FormRules} from 'element-plus';
import {ElMessage, ElMessageBox} from 'element-plus';
import axiosInstance from '@/utils/http/api';
import {Delete, Edit, Plus, Refresh, Search} from '@element-plus/icons-vue';

onMounted(() => {
  getList();

});


const pageSearch = ref({
  current: 1,
  pageSize: 10
});


const workOrderList = ref({});


const pageTotal = ref(null);//页面总数
const searchParam = ref({});//页面检索条件


const paginatedData = ref([]);
const formatType = (row, column, cellValue) => {
  const typeMap = {
    0: '新建',
    1: '入库',
    2: '出库',
    3: '完结'
  };
  return typeMap[cellValue] || '';
};

// 获取列表接口
const getList = () => {
  axiosInstance.get('/api/basedataScheduleEquipmentShift/getPage', {
    params: {
      ...searchParam.value,
      ...pageSearch.value
    }
  })
      .then(res => {
        if (res.code !== 200) {
          ElMessage.error(res.message);
          return false;
        }
        paginatedData.value = res.data.records;
        pageTotal.value = res.data.total;
      });
};

const handleSizeChange = (e) => {
  pageSearch.value.pageSize = e;
  getList();
};

const handleCurrentChange = (e) => {
  pageSearch.value.current = e;
  getList();
};

// 重置搜索条件
const resetSearch = () => {
  searchParam.value = {};
  pageSearch.value.current = 1;
  // current.value = 1
  getList();
};

</script>
<style scoped></style>
